<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>确认订单</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/confirm.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>

    <script src="js/rem.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script type="text/javascript">
        sessionStorage.url = "confirm";
        $(function () {
            var indentIds = [];
            var user = JSON.parse(sessionStorage.getItem("user"));
            //商品的id数组
            var productIds = JSON.parse(sessionStorage.getItem("productIdsStr"));
            console.log(productIds);
            $(".loading").addClass("loader-chanage");
            $(".loading").fadeOut(300);
            $(".info").renderValues(user);


            //获取session积分,给对应id的块赋值
            var total = JSON.parse(sessionStorage.getItem("totalString"));
            $("#totalIntegral").html(total);

            //根据商品的productIds渲染
            //发送ajax请求查询返回一个list
            $.get("/products/list?ids=" + productIds, function (data) {
                $(".travels").renderValues({list:data}, {
                    handle: function (ele, value) {
                        $(ele).attr("href", "/shop/zhifu.html?id=" + value);
                    }
                })

            })

            //点击提交按钮时,要保存订单信息,并跳转到订单页面
            $(".saveOrderBtn").click(function () {

                //获取productIds
                //在这里面可以用循环,一个个保存订单
                $.each(productIds, function (index, ele) {
                    $.get("/products/" + ele, function (data) {
                        var orderNumber = guid();//生成的uuid
                        //获得json就可以保存了
                        var json = {orderNumber: orderNumber, userId: user.id, state: 0, productId: data.id};

                        $.post("/order/indent", json, function (data) {
                            if (data.success) {
                                //根据orderNumber查出相关订单
                                $.get("/order/" + orderNumber + "/orderNumber", function (data) {
                                    //订单id数组
                                    indentIds.push(data.id);
                                    //存入商品id
                                    var indentIdsStr = JSON.stringify(indentIds);
                                    sessionStorage.setItem("indentIdsStr", indentIdsStr);
                                    if (indentIds.length == productIds.length) {
                                        window.location.href = "/shop/shoppingzhifu.html";
                                    }
                                });

                            }
                        });

                    }, "json");
                });
                console.log(indentIds.length);



            });


        });

        function guid() {
            return 'xxxx-xxxx-xxxx-xxxx-xxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }

    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <div class="top-sch-box top-sch-boxtwo flex-col">
        确认订单
    </div>
</header>
<!--header end-->

<div class="warp warptwo clearfloat">
    <div class="confirm clearfloat">
        <div class="add clearfloat box-s info">
            <a href="address.html">
                <div class="left clearfloat fl">
                    <i class="iconfont icon-dizhi1"></i>
                </div>
                <div class="middle clearfloat fl">
                    <p class="tit">
                        收货人：
                        <spn render-html="nickName"></spn>
                    </p>
                    <p class="fu-tit over2">
                        收货地址：湖南省长沙市高新区拓基城市广场金座A2002
                    </p>
                </div>
                <div class="left clearfloat fr">
                    <i class="iconfont icon-jiantou1"></i>
                </div>
            </a>
        </div>
        <div class="lie clearfloat travels">
            <div class="lie clearfloat" render-loop="list">
                <div class="gcontent clearfloat">
                    <a href="detail.html">
                        <div class="tu clearfloat fl">
                            <img render-src="list.coverUrl"/>
                        </div>
                    </a>
                    <div class="right clearfloat fl">
                        <a href="detail.html">
                            <p class="tit over" render-html="list.name"></p>
                            <!--<p class="fu-tit">颜色：蓝色  内存：120G</p>-->
                        </a>
                        <div class="xia clearfloat">
                            <a href="detail.html">
                                <p class="jifen fl over" render-html="list.integral"></p>
                            </a>
                            <span class="fr db">×1</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="gmshu clearfloat box-s fl">
            <div class="gcontent clearfloat">
                <p class="fl">购买数量</p>
                <div class="you clearfloat fr">
                    <ul>
                        <li id="down"><img src="images/jian.jpg"/></li>
                        <li id="count">1</li>
                        <li onclick="document.getElementById('count').innerHTML++"><img src="images/jia.jpg"/></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="gmshu gmshutwo clearfloat box-s fl">
            <div class="gcontent clearfloat">
                <p class="fl">配送方式</p>
                <div class="you clearfloat fr">
                    <span>快递 免邮</span>
                    <i class="iconfont icon-jiantou1"></i>
                </div>
            </div>
        </div>
        <div class="gmshu gmshutwo clearfloat box-s fl">
            <div class="gcontent clearfloat">
                <p class="fl">发票信息</p>
                <div class="you clearfloat fr">
                    <div class="xuan clearfloat">
                        <div class="radiotwo">
                            <label>
                                <input type="radio" name="fapiao" value="" checked/>
                                <div class="option"></div>
                                <span class="opt-text">需要发票</span>
                            </label>
                        </div>
                    </div>
                    <div class="xuan clearfloat">
                        <div class="radiotwo">
                            <label>
                                <input type="radio" name="fapiao" value=""/>
                                <div class="option"></div>
                                <span class="opt-text">不需要发票</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="gmshu gmshuthree clearfloat box-s fl">
            <div class="gcontent clearfloat">
                <p class="fl">买家留言</p>
                <div class="you clearfloat fl">
                    <input type="text" name="" id="" value="" class="text" placeholder="选填 对本次交易需求给商家留言"/>
                </div>
            </div>
        </div>
        <div class="gmshu clearfloat box-s fl travels">
            <p class="fr">共1件商品 合计<samp render-html="integral"></samp></p>
        </div>

    </div>
</div>

<!--settlement star-->
<div class="settlement clearfloat travels">
    <div class="zuo clearfloat fl box-s">
        共<span>1</span>件 总积分：<span id="totalIntegral"></span>
    </div>
    <a class="fl db saveOrderBtn">
        提交订单
    </a>
</div>
<!--settlement end-->

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="shop.html">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="cation.html">
                <i class="iconfont icon-icon04"></i>
                <p>分类</p>
            </a>
        </li>
        <li class="active">
            <a href="shopcar.html">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="center.html">
                <i class="iconfont icon-yonghuming"></i>
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<!--footer end-->
</body>

</html>
